<template>
  <div class="dashboard">
    <!-- 页面头部区域 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="ancient-title">生死簿工作台</div>
        <div class="header-subtitle">阴曹地府 · 轮回司管理中心</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon">
              <UserOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">生灵总数</div>
              <div class="stat-value">{{ systemInfo.totalSouls?.toLocaleString() }}</div>
              <div class="stat-label">累计管理</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card judgment-stat">
            <div class="stat-icon">
              <BankOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">今日审判</div>
              <div class="stat-value">{{ systemInfo.todayJudgments }}</div>
              <div class="stat-label">案件处理</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card pending-stat">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">待审案件</div>
              <div class="stat-value">{{ systemInfo.pendingCases }}</div>
              <div class="stat-label">排队等候</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card online-stat">
            <div class="stat-icon">
              <TeamOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">在线仙官</div>
              <div class="stat-value">{{ systemInfo.onlineUsers }}</div>
              <div class="stat-label">当前值班</div>
            </div>
          </div>
        </a-col>
      </a-row>

      <!-- 第二行统计卡片 -->
      <a-row :gutter="[20, 20]" class="stats-grid" style="margin-top: 20px">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card karma-stat">
            <div class="stat-icon">
              <TrophyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">业力平均</div>
              <div class="stat-value">{{ karmaAverage }}</div>
              <div class="stat-label">道德指数</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card reincarnation-stat">
            <div class="stat-icon">
              <ReloadOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">今日转世</div>
              <div class="stat-value">{{ todayReincarnation }}</div>
              <div class="stat-label">投胎完成</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card salvation-stat">
            <div class="stat-icon">
              <HeartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">超度申请</div>
              <div class="stat-value">{{ salvationRequests }}</div>
              <div class="stat-label">待处理</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card archive-stat">
            <div class="stat-icon">
              <FolderOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">档案更新</div>
              <div class="stat-value">{{ archiveUpdates }}</div>
              <div class="stat-label">本周新增</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 左侧主要内容 -->
        <a-col :xs="24" :lg="15">
          <div class="main-panel">
            <!-- 待办事项区域 -->
            <div class="section-wrapper">
              <div class="section-header">
                <h3 class="section-title">
                  <ClockCircleOutlined class="section-icon" />
                  待办事项
                </h3>
                <a-button type="link" class="section-action">查看全部</a-button>
              </div>

              <div class="todo-list">
                <div v-for="item in todoList" :key="item.id" class="todo-item">
                  <div class="todo-avatar">
                    <a-avatar :style="{ backgroundColor: getTypeColor(item.type) }" size="large">
                      <component :is="getTypeIcon(item.type)" />
                    </a-avatar>
                  </div>
                  <div class="todo-content">
                    <div class="todo-header">
                      <span :class="['todo-title', item.priority]">{{ item.title }}</span>
                      <a-tag :color="getPriorityColor(item.priority)" size="small">{{ item.priority }}</a-tag>
                    </div>
                    <div class="todo-description">{{ item.description }}</div>
                    <div class="todo-meta">
                      <span class="todo-deadline">截止：{{ item.deadline }}</span>
                      <a-button type="text" size="small" @click="handleTodo(item)" class="todo-action"> 立即处理 </a-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 案件处理流水线 -->
            <div class="section-wrapper">
              <div class="section-header">
                <h3 class="section-title">
                  <BankOutlined class="section-icon" />
                  案件处理流水线
                </h3>
                <a-button type="link" class="section-action">查看详情</a-button>
              </div>

              <div class="case-pipeline">
                <div v-for="stage in caseStages" :key="stage.id" class="pipeline-stage">
                  <div class="stage-header">
                    <div class="stage-title">{{ stage.name }}</div>
                    <div class="stage-count">{{ stage.count }}件</div>
                  </div>
                  <div class="stage-progress">
                    <div class="progress-bar" :style="{ width: stage.percentage + '%' }"></div>
                  </div>
                  <div class="stage-cases">
                    <div v-for="case_ in stage.cases" :key="case_.id" class="case-item">
                      <span class="case-name">{{ case_.name }}</span>
                      <span class="case-time">{{ case_.time }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 地府机构状态 -->
            <div class="section-wrapper">
              <div class="section-header">
                <h3 class="section-title">
                  <TeamOutlined class="section-icon" />
                  地府机构状态
                </h3>
              </div>

              <div class="organization-status">
                <a-row :gutter="[16, 16]">
                  <a-col :span="12" v-for="dept in departments" :key="dept.id">
                    <div class="dept-card">
                      <div class="dept-header">
                        <span class="dept-name">{{ dept.name }}</span>
                        <a-badge :status="dept.status" />
                      </div>
                      <div class="dept-stats">
                        <div class="dept-stat">
                          <span class="stat-label">在岗:</span>
                          <span class="stat-value">{{ dept.onDuty }}</span>
                        </div>
                        <div class="dept-stat">
                          <span class="stat-label">处理量:</span>
                          <span class="stat-value">{{ dept.processed }}</span>
                        </div>
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </div>

            <!-- 最近活动区域 -->
            <div class="section-wrapper">
              <div class="section-header">
                <h3 class="section-title">
                  <FileTextOutlined class="section-icon" />
                  最近活动
                </h3>
              </div>

              <div class="activity-timeline">
                <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
                  <div class="activity-dot" :style="{ backgroundColor: getActivityColor(activity.color) }">
                    <component :is="activity.icon" />
                  </div>
                  <div class="activity-content">
                    <div class="activity-title">{{ activity.title }}</div>
                    <div class="activity-description">{{ activity.description }}</div>
                    <div class="activity-time">{{ activity.time }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 右侧侧边栏 -->
        <a-col :xs="24" :lg="9">
          <div class="sidebar-panel">
            <!-- 地府值班安排 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <CalendarOutlined class="section-icon" />
                  值班安排
                </h3>
              </div>

              <div class="duty-schedule">
                <div v-for="duty in dutyList" :key="duty.hall" class="duty-item">
                  <div class="duty-hall">{{ duty.hall }}</div>
                  <div class="duty-officer">{{ duty.officer }}</div>
                  <div class="duty-status" :class="duty.status">{{ duty.statusText }}</div>
                </div>
              </div>
            </div>

            <!-- 系统公告 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <SoundOutlined class="section-icon" />
                  系统公告
                </h3>
              </div>

              <div class="announcements">
                <div v-for="announcement in announcements" :key="announcement.id" class="announcement-item">
                  <div class="announcement-title">{{ announcement.title }}</div>
                  <div class="announcement-time">{{ announcement.time }}</div>
                </div>
              </div>
            </div>

            <!-- 今日业力统计 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <TrophyOutlined class="section-icon" />
                  今日业力
                </h3>
              </div>

              <div class="karma-today">
                <div class="karma-item good">
                  <div class="karma-icon">✨</div>
                  <div class="karma-info">
                    <div class="karma-label">善行记录</div>
                    <div class="karma-count">{{ todayGoodDeeds }}</div>
                  </div>
                </div>
                <div class="karma-item bad">
                  <div class="karma-icon">⚡</div>
                  <div class="karma-info">
                    <div class="karma-label">恶行记录</div>
                    <div class="karma-count">{{ todayBadDeeds }}</div>
                  </div>
                </div>
                <div class="karma-item total">
                  <div class="karma-icon">⚖️</div>
                  <div class="karma-info">
                    <div class="karma-label">净业力值</div>
                    <div class="karma-count">+{{ netKarma }}</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 快速操作区域 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <ThunderboltOutlined class="section-icon" />
                  快速操作
                </h3>
              </div>

              <div class="quick-actions">
                <div class="action-row">
                  <button class="action-btn primary" @click="$router.push('/archives')">
                    <UserOutlined />
                    <span>查看档案</span>
                  </button>
                  <button class="action-btn" @click="$router.push('/judgment')">
                    <BankOutlined />
                    <span>开始审判</span>
                  </button>
                </div>
                <div class="action-row">
                  <button class="action-btn" @click="$router.push('/karma')">
                    <TrophyOutlined />
                    <span>业力记录</span>
                  </button>
                  <button class="action-btn" @click="$router.push('/reincarnation')">
                    <ReloadOutlined />
                    <span>轮回管理</span>
                  </button>
                </div>
                <div class="action-row">
                  <button class="action-btn" @click="$router.push('/salvation')">
                    <HeartOutlined />
                    <span>超度救赎</span>
                  </button>
                  <button class="action-btn" @click="$router.push('/statistics')">
                    <BarChartOutlined />
                    <span>数据统计</span>
                  </button>
                </div>
              </div>
            </div>

            <!-- 轮回六道分布 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <ReloadOutlined class="section-icon" />
                  轮回六道分布
                </h3>
              </div>

              <div class="realm-stats">
                <div v-for="realm in realmDistribution" :key="realm.name" class="realm-item">
                  <div class="realm-header">
                    <span class="realm-name">{{ realm.name }}</span>
                    <span class="realm-count">{{ realm.count?.toLocaleString() }}</span>
                  </div>
                  <div class="realm-progress">
                    <div
                      class="progress-bar"
                      :style="{
                        width: realm.percentage + '%',
                        backgroundColor: realm.color
                      }"
                    ></div>
                  </div>
                  <div class="realm-percentage">{{ realm.percentage }}%</div>
                </div>
              </div>
            </div>

            <!-- 系统监控区域 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <DashboardOutlined class="section-icon" />
                  系统监控
                </h3>
              </div>

              <div class="monitor-grid">
                <div class="monitor-item">
                  <div class="monitor-label">系统运行</div>
                  <div class="monitor-value">{{ systemUptime }}</div>
                </div>
                <div class="monitor-item">
                  <div class="monitor-label">数据库状态</div>
                  <div class="monitor-status">
                    <a-badge status="processing" />
                    <span>正常运行</span>
                  </div>
                </div>
                <div class="monitor-item">
                  <div class="monitor-label">轮回队列</div>
                  <div class="monitor-value highlight">{{ reincarnationQueue }} 人</div>
                </div>
                <div class="monitor-item">
                  <div class="monitor-label">地狱人数</div>
                  <div class="monitor-value warning">{{ hellPopulation }} 人</div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  UserOutlined,
  BankOutlined,
  ClockCircleOutlined,
  TeamOutlined,
  TrophyOutlined,
  BarChartOutlined,
  CheckCircleOutlined,
  ExclamationCircleOutlined,
  FileTextOutlined,
  ReloadOutlined,
  HeartOutlined,
  FolderOutlined,
  CalendarOutlined,
  DashboardOutlined,
  ThunderboltOutlined,
  SoundOutlined
} from '@ant-design/icons-vue'
import { useAppStore } from '@/stores'

// 路由
const router = useRouter()

// 状态管理
const appStore = useAppStore()

// 响应式数据
const loading = ref(false)
const systemUptime = ref('15天 8小时 23分钟')
const reincarnationQueue = ref(89)
const hellPopulation = ref(1567)

// 新增统计数据
const karmaAverage = ref(72.5)
const todayReincarnation = ref(18)
const salvationRequests = ref(12)
const archiveUpdates = ref(156)

// 今日业力数据
const todayGoodDeeds = ref(245)
const todayBadDeeds = ref(87)
const netKarma = ref(158)

// 待办事项列表
const todoList = ref([
  {
    id: 1,
    title: '审理张三投胎案件',
    description: '业力积分85，申请投胎为人',
    type: 'judgment',
    priority: '高',
    deadline: '2023-12-15'
  },
  {
    id: 2,
    title: '更新李四档案信息',
    description: '补充死亡原因和最终业力',
    type: 'archive',
    priority: '中',
    deadline: '2023-12-16'
  },
  {
    id: 3,
    title: '处理超度申请',
    description: '王五家属申请超度仪式',
    type: 'salvation',
    priority: '低',
    deadline: '2023-12-18'
  }
])

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    title: '审判完成',
    description: '张三案件审理完毕，判决投胎为人',
    time: '10分钟前',
    icon: CheckCircleOutlined,
    color: 'green'
  },
  {
    id: 2,
    title: '档案更新',
    description: '李四生死档案已更新',
    time: '1小时前',
    icon: FileTextOutlined,
    color: 'blue'
  },
  {
    id: 3,
    title: '系统警告',
    description: '地狱人数接近上限',
    time: '2小时前',
    icon: ExclamationCircleOutlined,
    color: 'red'
  }
])

// 轮回六道分布
const realmDistribution = ref([
  { name: '天道', count: 234, percentage: 3.4, color: '#f59e0b' },
  { name: '人道', count: 4567, percentage: 66.8, color: '#10b981' },
  { name: '阿修罗道', count: 456, percentage: 6.7, color: '#8b5cf6' },
  { name: '畜生道', count: 1234, percentage: 18.1, color: '#f97316' },
  { name: '饿鬼道', count: 234, percentage: 3.4, color: '#06b6d4' },
  { name: '地狱道', count: 108, percentage: 1.6, color: '#ef4444' }
])

// 地府值班安排
const dutyList = ref([
  { hall: '一殿秦广王', officer: '秦广王', status: 'online', statusText: '值班中' },
  { hall: '二殿楚江王', officer: '楚江王', status: 'offline', statusText: '休息中' },
  { hall: '三殿宋帝王', officer: '宋帝王', status: 'online', statusText: '值班中' },
  { hall: '四殿伍官王', officer: '伍官王', status: 'busy', statusText: '审判中' }
])

// 案件处理流水线
const caseStages = ref([
  {
    id: 1,
    name: '初审登记',
    count: 23,
    percentage: 78,
    cases: [
      { id: 1, name: '李四案', time: '5分钟前' },
      { id: 2, name: '王五案', time: '12分钟前' }
    ]
  },
  {
    id: 2,
    name: '业力审核',
    count: 15,
    percentage: 60,
    cases: [
      { id: 3, name: '赵六案', time: '8分钟前' },
      { id: 4, name: '孙七案', time: '15分钟前' }
    ]
  },
  {
    id: 3,
    name: '最终判决',
    count: 8,
    percentage: 32,
    cases: [{ id: 5, name: '周八案', time: '3分钟前' }]
  },
  {
    id: 4,
    name: '执行转世',
    count: 5,
    percentage: 20,
    cases: [{ id: 6, name: '吴九案', time: '1分钟前' }]
  }
])

// 地府机构状态
const departments = ref([
  { id: 1, name: '生死司', status: 'processing', onDuty: 8, processed: 45 },
  { id: 2, name: '轮回司', status: 'processing', onDuty: 6, processed: 23 },
  { id: 3, name: '业力司', status: 'warning', onDuty: 4, processed: 67 },
  { id: 4, name: '档案司', status: 'success', onDuty: 5, processed: 89 },
  { id: 5, name: '审判司', status: 'processing', onDuty: 12, processed: 34 },
  { id: 6, name: '超度司', status: 'success', onDuty: 3, processed: 12 }
])

// 系统公告
const announcements = ref([
  { id: 1, title: '地狱扩容工程将于下周开始', time: '2小时前' },
  { id: 2, title: '新版轮回系统上线通知', time: '1天前' },
  { id: 3, title: '业力计算规则更新', time: '2天前' },
  { id: 4, title: '档案数字化项目进展', time: '3天前' }
])

// 计算属性
const systemInfo = computed(() => appStore.systemInfo)

// 方法
const getPriorityColor = (priority) => {
  const colors = {
    高: 'red',
    中: 'orange',
    低: 'blue'
  }
  return colors[priority] || 'default'
}

const getTypeColor = (type) => {
  const colors = {
    judgment: '#722ed1',
    archive: '#1890ff',
    salvation: '#52c41a'
  }
  return colors[type] || '#666'
}

const getTypeIcon = (type) => {
  const icons = {
    judgment: BankOutlined,
    archive: UserOutlined,
    salvation: TrophyOutlined
  }
  return icons[type] || FileTextOutlined
}

const getActivityColor = (color) => {
  const colors = {
    green: '#52c41a',
    blue: '#1890ff',
    red: '#ff4d4f',
    orange: '#fa8c16',
    purple: '#722ed1'
  }
  return colors[color] || '#666'
}

const handleTodo = (todo) => {
  // 根据待办类型跳转到相应页面
  const routes = {
    judgment: '/judgment',
    archive: '/archives',
    salvation: '/salvation'
  }
  router.push(routes[todo.type] || '/dashboard')
}

// 生命周期
onMounted(() => {
  // 可以在这里加载数据
  loading.value = false
})
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 0;

  // 页面头部
  .dashboard-header {
    text-align: center;
    margin-bottom: 48px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 48px;

    .stats-grid {
      .stat-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 24px;
        height: 120px;
        display: flex;
        align-items: center;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: linear-gradient(90deg, transparent, currentColor, transparent);
          opacity: 0.6;
        }

        &.primary-stat {
          color: $secondary-color;
          border-color: rgba(212, 153, 10, 0.2);
        }

        &.judgment-stat {
          color: $primary-color;
          border-color: rgba(114, 46, 209, 0.2);
        }

        &.pending-stat {
          color: #fa541c;
          border-color: rgba(245, 84, 28, 0.2);
        }

        &.online-stat {
          color: #52c41a;
          border-color: rgba(82, 196, 26, 0.2);
        }

        &.karma-stat {
          color: #d4990a;
          border-color: rgba(212, 153, 10, 0.2);
        }

        &.reincarnation-stat {
          color: #13c2c2;
          border-color: rgba(19, 194, 194, 0.2);
        }

        &.salvation-stat {
          color: #eb2f96;
          border-color: rgba(235, 47, 150, 0.2);
        }

        &.archive-stat {
          color: #1890ff;
          border-color: rgba(24, 144, 255, 0.2);
        }

        .stat-icon {
          font-size: 36px;
          margin-right: 20px;
          opacity: 0.8;
        }

        .stat-content {
          flex: 1;

          .stat-title {
            font-size: 14px;
            color: $text-secondary;
            margin-bottom: 8px;
            font-weight: 500;
          }

          .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: currentColor;
            margin-bottom: 4px;
            line-height: 1;
          }

          .stat-label {
            font-size: 12px;
            color: $text-tertiary;
          }
        }
      }
    }
  }

  // 主要内容区域
  .main-content {
    margin-top: 0;

    .content-grid {
      align-items: flex-start;
    }

    .main-panel,
    .sidebar-panel {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    // 通用区域样式
    .section-wrapper {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      padding: 24px;
      backdrop-filter: blur(10px);

      &.compact {
        padding: 20px;
      }

      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .section-title {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          color: $text-primary;
          margin: 0;

          .section-icon {
            font-size: 20px;
            margin-right: 12px;
            color: $primary-color;
          }
        }

        .section-action {
          color: $primary-color;
          padding: 0;
          height: auto;
          font-size: 14px;
        }
      }
    }

    // 待办事项样式
    .todo-list {
      .todo-item {
        display: flex;
        align-items: flex-start;
        padding: 16px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        &:last-child {
          border-bottom: none;
        }

        .todo-avatar {
          margin-right: 16px;
          flex-shrink: 0;
        }

        .todo-content {
          flex: 1;
          min-width: 0;

          .todo-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;

            .todo-title {
              font-size: 16px;
              font-weight: 500;
              color: $text-primary;

              &.高 {
                color: #ff4d4f;
              }
              &.中 {
                color: #fa8c16;
              }
              &.低 {
                color: #1890ff;
              }
            }
          }

          .todo-description {
            font-size: 14px;
            color: $text-secondary;
            margin-bottom: 12px;
            line-height: 1.4;
          }

          .todo-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .todo-deadline {
              font-size: 12px;
              color: $text-tertiary;
            }

            .todo-action {
              color: $primary-color;
              padding: 0;
              height: auto;
            }
          }
        }
      }
    }

    // 活动时间线样式
    .activity-timeline {
      .activity-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        .activity-dot {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          flex-shrink: 0;
          color: white;
          font-size: 14px;
        }

        .activity-content {
          flex: 1;
          padding-top: 2px;

          .activity-title {
            font-size: 15px;
            font-weight: 500;
            color: $text-primary;
            margin-bottom: 4px;
          }

          .activity-description {
            font-size: 13px;
            color: $text-secondary;
            margin-bottom: 6px;
            line-height: 1.4;
          }

          .activity-time {
            font-size: 12px;
            color: $text-tertiary;
          }
        }
      }
    }

    // 监控网格样式
    .monitor-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;

      .monitor-item {
        padding: 16px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        text-align: center;

        .monitor-label {
          font-size: 12px;
          color: $text-secondary;
          margin-bottom: 8px;
          display: block;
        }

        .monitor-value {
          font-size: 16px;
          font-weight: 600;
          color: $text-primary;

          &.highlight {
            color: $primary-color;
          }

          &.warning {
            color: #fa541c;
          }
        }

        .monitor-status {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;

          span {
            font-size: 14px;
            color: $text-primary;
          }
        }
      }
    }

    // 快速操作样式
    .quick-actions {
      .action-row {
        display: flex;
        gap: 12px;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .action-btn {
          flex: 1;
          height: 48px;
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 12px;
          color: $text-primary;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 4px;
          cursor: pointer;
          transition: all 0.2s ease;
          font-size: 12px;

          &:hover {
            background: rgba(114, 46, 209, 0.1);
            border-color: $primary-color;
            color: $primary-color;
          }

          &.primary {
            background: rgba(114, 46, 209, 0.2);
            border-color: $primary-color;
            color: $primary-color;
          }

          :deep(.anticon) {
            font-size: 18px;
          }
        }
      }
    }

    // 轮回分布样式
    .realm-stats {
      .realm-item {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        .realm-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .realm-name {
            font-size: 14px;
            color: $text-primary;
            font-weight: 500;
          }

          .realm-count {
            font-size: 13px;
            color: $text-secondary;
          }
        }

        .realm-progress {
          height: 6px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 3px;
          overflow: hidden;
          margin-bottom: 6px;

          .progress-bar {
            height: 100%;
            border-radius: 3px;
            transition: width 0.3s ease;
          }
        }

        .realm-percentage {
          font-size: 12px;
          color: $text-tertiary;
          text-align: right;
        }
      }
    }

    // 值班安排样式
    .duty-schedule {
      .duty-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        &:last-child {
          border-bottom: none;
        }

        .duty-hall {
          font-size: 14px;
          color: $text-primary;
          font-weight: 500;
          flex: 1;
        }

        .duty-officer {
          font-size: 13px;
          color: $text-secondary;
          flex: 1;
          text-align: center;
        }

        .duty-status {
          font-size: 12px;
          padding: 2px 8px;
          border-radius: 4px;

          &.online {
            background: rgba(82, 196, 26, 0.2);
            color: #52c41a;
          }

          &.offline {
            background: rgba(255, 255, 255, 0.1);
            color: $text-tertiary;
          }

          &.busy {
            background: rgba(245, 84, 28, 0.2);
            color: #fa541c;
          }
        }
      }
    }

    // 今日业力样式
    .karma-today {
      .karma-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        &:last-child {
          border-bottom: none;
        }

        .karma-icon {
          font-size: 20px;
          margin-right: 12px;
          width: 32px;
          text-align: center;
        }

        .karma-info {
          flex: 1;

          .karma-label {
            font-size: 13px;
            color: $text-secondary;
            margin-bottom: 4px;
          }

          .karma-count {
            font-size: 16px;
            font-weight: 600;
            color: $text-primary;
          }
        }

        &.good .karma-count {
          color: #52c41a;
        }

        &.bad .karma-count {
          color: #ff4d4f;
        }

        &.total .karma-count {
          color: $secondary-color;
        }
      }
    }

    // 案件处理流水线样式
    .case-pipeline {
      .pipeline-stage {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        .stage-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .stage-title {
            font-size: 14px;
            font-weight: 500;
            color: $text-primary;
          }

          .stage-count {
            font-size: 12px;
            color: $text-secondary;
          }
        }

        .stage-progress {
          height: 4px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 2px;
          overflow: hidden;
          margin-bottom: 12px;

          .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, $primary-color, $secondary-color);
            border-radius: 2px;
            transition: width 0.3s ease;
          }
        }

        .stage-cases {
          .case-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            font-size: 12px;

            .case-name {
              color: $text-secondary;
            }

            .case-time {
              color: $text-tertiary;
            }
          }
        }
      }
    }

    // 地府机构状态样式
    .organization-status {
      .dept-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        padding: 12px;

        .dept-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .dept-name {
            font-size: 13px;
            font-weight: 500;
            color: $text-primary;
          }
        }

        .dept-stats {
          .dept-stat {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
            font-size: 12px;

            &:last-child {
              margin-bottom: 0;
            }

            .stat-label {
              color: $text-secondary;
            }

            .stat-value {
              color: $text-primary;
              font-weight: 500;
            }
          }
        }
      }
    }

    // 系统公告样式
    .announcements {
      .announcement-item {
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        &:last-child {
          border-bottom: none;
        }

        .announcement-title {
          font-size: 14px;
          color: $text-primary;
          margin-bottom: 4px;
          line-height: 1.4;
        }

        .announcement-time {
          font-size: 12px;
          color: $text-tertiary;
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 1200px) {
  .dashboard {
    .stats-section .stats-grid {
      .stat-card {
        height: 100px;
        padding: 20px;

        .stat-icon {
          font-size: 28px;
          margin-right: 16px;
        }

        .stat-content .stat-value {
          font-size: 24px;
        }
      }
    }

    .main-content {
      .main-panel,
      .sidebar-panel {
        gap: 24px;
      }
    }
  }
}

@media (max-width: 768px) {
  .dashboard {
    .dashboard-header {
      margin-bottom: 32px;

      .header-content .ancient-title {
        font-size: 24px;
      }
    }

    .stats-section {
      margin-bottom: 32px;

      .stats-grid {
        .stat-card {
          height: 80px;
          padding: 16px;

          .stat-icon {
            font-size: 24px;
            margin-right: 12px;
          }

          .stat-content {
            .stat-value {
              font-size: 20px;
            }

            .stat-title {
              font-size: 12px;
            }
          }
        }
      }
    }

    .main-content {
      .content-grid {
        gap: 24px;
      }

      .section-wrapper {
        padding: 20px;
      }

      .monitor-grid {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>
